/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */


import { observer } from 'mobx-react-lite';
import { ReactNode } from 'react';
import styles from './MyImg.module.less';
import myImgStore from './myImgStore';

// PC端组件推荐使用Ant Design组件库
import utils from '@/utils/utils';
import { EditOutlined, PlusOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { Button, Card, Dropdown, Form, Image, Input, List, Modal, Pagination, Spin, Typography, Tooltip, Space } from 'antd';

// 组件props接口定义
interface Iprops {
    children?: ReactNode;
}

// 重要：组件函数不要使用React.FC类型注解
const MyImg = observer((props: Iprops) => {
    // 从store中获取状态
    const {
        dataList, loading, uploadLoading, search, page, total,
        pageSize, editOpen, editLoading
    } = myImgStore;

    // 表单实例
    const [form] = Form.useForm();

    // 编辑表单提交处理
    const handleEditSubmit = async () => {
        const values = await form.validateFields();
        await myImgStore.writeMyImg(values);
        form.resetFields();
    };

    // 操作菜单项
    const getActionItems = (item: any) => [
        {
            key: 'preview',
            icon: <EyeOutlined />,
            label: '预览',
            onClick: () => {
                Modal.info({
                    title: item.name,
                    content: (
                        <div style={{ textAlign: 'center', padding: '20px 0' }}>
                            <Image
                                src={utils.ossSuffix(item.url, 800)}
                                alt={item.name}
                                style={{ maxWidth: '100%', maxHeight: '60vh' }}
                                preview={false}
                            />
                        </div>
                    ),
                    width: 800,
                    icon: null,
                });
            }
        },
        {
            key: 'edit',
            icon: <EditOutlined />,
            label: '编辑',
            onClick: () => {
                form.setFieldsValue(item);
                myImgStore.setEditOpen(true);
            }
        },
        {
            key: 'delete',
            icon: <DeleteOutlined />,
            label: '删除',
            danger: true,
            onClick: () => {
                Modal.confirm({
                    title: '确认删除',
                    content: `确定要删除图片 "${item.name}" 吗？`,
                    onOk: () => {
                        // 这里添加删除逻辑
                        console.log('删除图片:', item.id);
                    }
                });
            }
        }
    ];

    return (
        <div className={styles.MyImg}>
            {/* PC端页面标题区域 */}
            <div className={styles.header}>
                <div className={styles.titleSection}>
                    <Typography.Title level={3} className={styles.title}>图片管理</Typography.Title>
                    <Typography.Text className={styles.subtitle}>管理和上传图片资源</Typography.Text>
                </div>
                <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={myImgStore.writeMyImg}
                    loading={uploadLoading}
                    className={styles.uploadBtn}
                    size="large"
                >
                    上传图片
                </Button>
            </div>

            {/* 搜索和筛选区域 */}
            <Card className={styles.searchCard} size="small">
                <div className={styles.searchWrapper}>
                    <Input
                        placeholder="搜索图片名称..."
                        prefix={<span className={styles.searchIcon}>🔍</span>}
                        onPressEnter={(e) => {
                            myImgStore.getMyImg({ page: 1, search: e.currentTarget.value });
                        }}
                        className={styles.searchInput}
                        allowClear
                    />
                    <div className={styles.statsInfo}>
                        <Typography.Text type="secondary">
                            共 {total} 张图片
                        </Typography.Text>
                    </div>
                </div>
            </Card>

            {/* 数据展示区域 */}
            <div className={styles.dataDisplay}>
                <Spin spinning={loading}>
                    <List
                        grid={{ 
                            gutter: 12, 
                            xs: 2, 
                            sm: 3, 
                            md: 4, 
                            lg: 5, 
                            xl: 6, 
                            xxl: 8 
                        }}
                        dataSource={dataList}
                        renderItem={(item) => (
                            <List.Item>
                                <Card
                                    className={styles.imageCard}
                                    hoverable
                                    cover={
                                        <div className={styles.imageContainer}>
                                            <Image
                                                src={utils.ossSuffix(item.url, 200)}
                                                alt={item.name}
                                                preview={false}
                                                className={styles.image}
                                                fallback="/public/logo.png"
                                            />
                                            <div className={styles.imageOverlay}>
                                                <Space size={4}>
                                                    <Tooltip title="预览">
                                                        <Button 
                                                            type="text" 
                                                            size="small"
                                                            icon={<EyeOutlined />}
                                                            className={styles.actionBtn}
                                                            onClick={() => {
                                                                Modal.info({
                                                                    title: item.name,
                                                                    content: (
                                                                        <div style={{ textAlign: 'center', padding: '20px 0' }}>
                                                                            <Image
                                                                                src={utils.ossSuffix(item.url, 800)}
                                                                                alt={item.name}
                                                                                style={{ maxWidth: '100%', maxHeight: '60vh' }}
                                                                                preview={false}
                                                                            />
                                                                        </div>
                                                                    ),
                                                                    width: 800,
                                                                    icon: null,
                                                                });
                                                            }}
                                                        />
                                                    </Tooltip>
                                                    <Tooltip title="编辑">
                                                        <Button 
                                                            type="text" 
                                                            size="small"
                                                            icon={<EditOutlined />}
                                                            className={styles.actionBtn}
                                                            onClick={() => {
                                                                form.setFieldsValue(item);
                                                                myImgStore.setEditOpen(true);
                                                            }}
                                                        />
                                                    </Tooltip>
                                                    <Tooltip title="删除">
                                                        <Button 
                                                            type="text" 
                                                            size="small"
                                                            danger
                                                            icon={<DeleteOutlined />}
                                                            className={styles.actionBtn}
                                                            onClick={() => {
                                                                Modal.confirm({
                                                                    title: '确认删除',
                                                                    content: `确定要删除图片 "${item.name}" 吗？`,
                                                                    onOk: () => {
                                                                        console.log('删除图片:', item.id);
                                                                    }
                                                                });
                                                            }}
                                                        />
                                                    </Tooltip>
                                                </Space>
                                            </div>
                                        </div>
                                    }
                                >
                                    <Card.Meta
                                        title={
                                            <div className={styles.imageTitle} title={item.name}>
                                                {item.name}
                                            </div>
                                        }
                                        description={
                                            <div className={styles.imageInfo}>
                                                <span className={styles.imageSize}>{item.size}</span>
                                            </div>
                                        }
                                    />
                                </Card>
                            </List.Item>
                        )}
                    />
                </Spin>
            </div>

            {/* 分页区域 */}
            <div className={styles.paginationWrapper}>
                <Pagination
                    current={page}
                    total={total}
                    pageSize={pageSize}
                    onChange={(page) => myImgStore.getMyImg({ page })}
                    onShowSizeChange={(_, pageSize) => myImgStore.getMyImg({ page: 1, pageSize })}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                    size="default"
                />
            </div>

            {/* 传入的子组件 */}
            {props.children && <div className={styles.childrenContainer}>{props.children}</div>}

            {/* 编辑图片信息弹窗 */}
            <Modal
                title="编辑图片信息"
                open={editOpen}
                onOk={handleEditSubmit}
                onCancel={() => {
                    myImgStore.setEditOpen(false);
                    form.resetFields();
                }}
                confirmLoading={editLoading}
                width={500}
            >
                <Form
                    form={form}
                    layout="vertical"
                >
                    <Form.Item name="id" hidden>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="图片名称"
                        name="name"
                        rules={[{ required: true, message: '请输入图片名称' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="文件大小"
                        name="size"
                    >
                        <Input disabled />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
});

export default MyImg;
